<template>
  <div>
    <van-sticky>
      <van-nav-bar
        title="测评记录"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <div v-cloak class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad(userId)"
        >
          <van-cell
            v-for="item of projectList"
            :key="item.id"
            :title="item.projectName"
          >
            已完成
          </van-cell>
        </van-list>
      </van-pull-refresh>

      <div v-if="projectList.length == 0 && !loading" class="footer">
        <img src="../../../../assets/icon/none.png" alt="" />
        <div>暂无测评记录</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref, Ref, onMounted } from 'vue'
import axios from '/@/api/axios'
import { useRoute } from 'vue-router'

const show = ref(false)
const route = useRoute()
const loading = ref(false)
const finished = ref(false)
let projectList = ref<any[]>([])
let userId = route.query.userId

function onLoad(userId: any) {
  if (refreshing.value) {
    index.value = 1
    projectList.value = []
    refreshing.value = false
  }
  getProjectList(userId).then((res) => {
    projectList.value.push(...res.data.data.records)
    index.value++
    loading.value = false

    if (res.data.data.records.length == 0) {
      finished.value = true
    }
  })
}

let index = ref(1)
const refreshing = ref(false)

function onClickLeft() {
  history.back()
}

function onRefresh() {
  finished.value = false
  loading.value = true
  onLoad(userId)
}

function getProjectList(userId: number) {
  const url = `/api/blade-measure/measure/userprojectgauge/page?current=${index.value}&size=20&includeId=${userId}`

  return axios.get(url)
}
</script>

<style lang="less" scoped>
.footer {
  text-align: center;
  font-size: 14px;
  color: #646566;
  margin-top: 20px;

  img {
    width: 100px;
  }
}
</style>
